import React, { ReactElement, useEffect, useState } from 'react';
import { Layout } from 'antd';
import DefaultHeader from './components/header';
import DefaultFooter from './components/footer';
import { useRouter } from 'next/router';
import { MenuItem } from '@/utils/menu';
import Head from 'next/head';
import { baseInfoType } from '@/utils/model';
const { Content } = Layout;

export default function DefaultLayout({
  children,
  menuList,
  baseInfo,
}: {
  children: ReactElement;
  menuList: MenuItem[];
  baseInfo: baseInfoType;
}) {
  const router = useRouter();
  const [current, setCurrent] = useState<string>('');
  useEffect(() => {
    const info = menuList.find(
      (item) => item.path === router.asPath || item.key === router.asPath,
    ) as MenuItem;
    if (info) {
      setCurrent(info.key as string);
    }
  }, [menuList, router.asPath]);
  return (
    <Layout>
      <Head>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="main-container">
        <DefaultHeader menuList={menuList} current={current} setCurrent={setCurrent} />
        <Content className="flex-1 flex flex-col">{children}</Content>
        <DefaultFooter baseInfo={baseInfo} />
      </div>
    </Layout>
  );
}
